// 导入素材
import meter1 from "../assets/img/meter1.svg";
import meter2 from "../assets/img/meter2.svg";
import meter3 from "../assets/img/meter3.svg";
import arrow1 from "../assets/img/arrow1.svg";
import arrow2 from "../assets/img/arrow2.svg";
import colorSharp from "../assets/img/color-sharp.png"

// 导入轮播图组件样式
import 'react-multi-carousel/lib/styles.css';
import Carousel from 'react-multi-carousel';
import { Container, Row, Col } from "react-bootstrap";




export const Skills = () => {
    // 轮播图Carousel 的模板
    const responsive = {
        // superLargeDesktop: {
        //   // the naming can be any, depends on you.
        //   breakpoint: { max: 4000, min: 3000 },
        //   items: 5
        // },
        desktop: {
          breakpoint: { max: 3000, min: 1024 },
          items: 3
        },
        tablet: {
          breakpoint: { max: 1024, min: 464 },
          items: 2
        },
        mobile: {
          breakpoint: { max: 464, min: 0 },
          items: 1
        }
      };

    return(
        <section className="skill" id="skills">
            <Container>
                <Row>
                    <Col>
                    <div className="skill-bx wow zoomIn">
                        <h2>Skills  技术</h2>
                        <p>Web技能是作为Web开发人员学习的有用技能的直观概述。它对于刚开始学习web开发的人和在这个领域工作多年并希望学习新东西的人来说非常有用。作为一个初学者，我会鼓励你不要把这个网站看作是你需要知道什么的明确列表，而是作为一个例子，你可以学习什么，你可以从哪里开始。这些技能是按时间顺序排列的，我建议你早期投入学习的占比，但你可以自由地跳来跳去。</p>
                        <Carousel responsive={responsive} infinite={false} className="owl-carousel owl-theme skill-slider">
                            <div className="item">
                                <img src={meter2}  alt="Image" />
                                <h5>HTML</h5>
                            </div>
                            <div className="item">
                                <img src={meter3}  alt="Image" />
                                <h5>CSS</h5>
                            </div>
                            <div className="item">
                                <img src={meter1}  alt="Image" />
                                <h5>JavaScript</h5>
                            </div>
                            <div className="item">
                                <img src={meter3}  alt="Image" />
                                <h5>React</h5>
                            </div>
                            <div className="item">
                                <img src={meter3}  alt="Image" />
                                <h5>Vue</h5>
                            </div>
                            <div className="item">
                                <img src={meter2}  alt="Image" />
                                <h5>Uniapp</h5>
                            </div>
                            <div className="item">
                                <img src={meter3}  alt="Image" />
                                <h5>Node</h5>
                            </div>
                            <div className="item">
                                <img src={meter2}  alt="Image" />
                                <h5>HTTP</h5>
                            </div>
                        </Carousel>
                    </div>
                    </Col>
                </Row>
            </Container>
            <img className="background-image-left" src={colorSharp} />
        </section>
    )
}